<template>
  <view class="container">
    <view class="content">
      <!-- 头部 -->
      <view class="header">
        <view class="info">
          <view class="left" @click="$goURl('/pages/personal/set/userinfo')">
            <image :src="userInfo.head?userInfo.head:$defaultAvatar" mode="aspectFill"></image>
          </view>
          <view class="right">
            <view class="top">
              <view class="name">{{ userInfo.nickname }}</view>
              <view class="tel">{{ $setPhone(userInfo.mobile) }}</view>

            </view>

          </view>

        </view>
      </view>


      <view class="page-content-top">
        <view class="">
          <view class="top-text">
            会员等级
          </view>
          <view class="top-text-s l_f_r l_al_c">
           {{level[userInfo.level]}}
            <up-rate style="margin-left: 10rpx" :gutter="2" :count="5" inactiveColor="transparent" activeColor="#ecfa5d" readonly  v-model="userInfo.new_level"></up-rate>
          </view>
        </view>
        <view class="right-text">
          <view class="" @click="$goURl('/pages/personal/wallet/balance?wallet_type=4')">
            权益值:{{ (userInfo.rights || 0).toFixed(2) }}
          </view>
          <view class="" @click="$goURl('/pages/personal/wallet/balance?wallet_type=5')">
            贡献值:{{ (userInfo.contribution || 0).toFixed(2) }}
          </view>
        </view>
      </view>
      <!-- 常用工具 -->
      <view class="page-content">

        <view class="" style="position: absolute;top: 50rpx;left: 0;right: 0;bottom: 0;">
          <view class="order" style="margin-top: 0;">
            <view class="title">
              我的订单
            </view>
            <view class="listss">
              <view class="item" v-for="(item,index) in orderList" :key="index" @click="$goURl(item.url)">

                <view class="left" style="position: relative;">
									<u-badge style="position: absolute;right: 5rpx;top: -10rpx;" :type="type" max="99" :value="subscriptOrder[item.subscript]"></u-badge>
                  <image :src="item.img" mode="" style="width: 60upx;height: 60upx;margin-bottom: 6px;">
                  </image>
                  {{ item.name }}
                </view>
                <!-- <uni-icons type="forward" size="22"></uni-icons> -->
              </view>
            </view>
          </view>
          <view class="order">
            <view class="title">
              积分专区
            </view>
            <view class="listss">
              <view class="item" v-for="(item,index) in integrationList" :key="index" @click="$goURl(item.url)">
                <view class="left">
                  <view class="" style="font-size: 36rpx;margin-bottom: 20rpx;">
                    {{ index > 1 ? userInfo[item.value] : (userInfo[item.value]).toFixed(2) }}
                  </view>
                  {{ item.name }}
                </view>
                <!-- <uni-icons type="forward" size="22"></uni-icons> -->
              </view>
            </view>
          </view>
          <view class="jingci" @click="$goURl('/pages/personal/share')">

          </view>
          <!-- 常用工具 -->
          <view class="order">
            <view class="titletow">
              <view>我的服务</view>
            </view>
            <view class="listss l_j_s">
              <view class="items" v-for="(item,index) in orderlistsss" :key="index" @click="toUrl(item)">
                <view class="left">
                  <image :src="item.img" mode="widthFix" style="width: 60rpx"></image>
                  <view class="name" style="font-size: 24rpx;color: #2D2D2D;">{{ item.name }}</view>
                </view>

              </view>

              <view v-if="!userInfo.parentMobile" class="items" @click="confirmPopupRef.open()">
                <view class="left">
                  <image src="https://pili-vod.guanxikeji.com/fubao/img/1755657880960.png" mode="widthFix"
                         style="width: 60rpx"></image>
                  <view class="name" style="font-size: 24rpx;color: #2D2D2D;">绑定邀请人</view>
                </view>

              </view>
              <view class="items" @click="logout">
                <view class="left">
                  <image src="https://pili-vod.guanxikeji.com/fubao/img/1755657961417.png" mode="widthFix"
                         style="width: 60rpx"></image>
                  <view class="name" style="font-size: 24rpx;color: #2D2D2D;">退出登录</view>
                </view>

              </view>


            </view>
          </view>

					<view class="" style="height: 200rpx;">

					</view>
          <view class="GoodsListTitle" v-if="isShow">
            <view>推荐好物</view>
          </view>
          <!-- 普通商品列表 -->
          <GoodsList v-if="isShow" style="padding: 0 30upx; margin-bottom: 50rpx; " :type="1"
                     :goodlistData="data.goodlistData"></GoodsList>
        </view>

      </view>
      <!-- <cc-defineDialogBox :isShow="isBox"></cc-defineDialogBox> -->


      <view class="" style="height: 80rpx;">

      </view>

      <view class="page-total" v-if="isBox">
        <view class="box">
          <view class="dialog-box">
            <view class="title">景瓷商链绑定</view>

            <input type="text" style="margin-left: 30px;" v-model="account" placeholder="请输入景瓷商链账号">

            <view class="operation-btn">
              <view class="btn" @click="onCancel">
                <text>取消</text>
                <text class="tag"></text>
              </view>
              <view class="btn" @click="onConfirm">
                <text class="activity">确定</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <ConfirmPopup ref="confirmPopupRef" confirmText="关联推荐人"
                  title="关联推荐人"
                  @confirm="bindingFn">
      <template #content>
        <view class="">
          <up-input class="binding_input" v-model="bindingValue" placeholder="请输入关联推荐人"></up-input>
          <view class="text_c_r text_5_24">
            请输入推荐人手机号或uid
          </view>
        </view>
      </template>
    </ConfirmPopup>
  </view>
</template>

<script setup>
//商品列表
import GoodsList from "@/components/home/goods/goodsList.vue"
import * as qrcode from "../../static/js/reqrcode.js"
import {getCurrentInstance, reactive, ref} from "vue";
import {onLoad, onPullDownRefresh, onReachBottom, onShow} from "@dcloudio/uni-app";
import {useStore} from 'vuex';
import ConfirmPopup from "@/components/ConfirmPopup.vue";

const confirmPopupRef = ref(null);
const {
  proxy
} = getCurrentInstance();

const bindingValue=ref('')
const bindingFn=()=>{
  // if (!(/^1[3456789]\d{9}$/).test(bindingValue.value)) {
  //   uni.showToast({
  //     icon: "none",
  //     position: "bottom",
  //     title: "手机号不正确"
  //   });
  //   return false;
  // }
  proxy.$request({
    url: `api/binding/`,
    method: "post",
    data: { mobile: bindingValue.value },
    success(res) {
      console.log("handleConfirm", res);
      if(res.errno == 0){
        inits()
      }
      uni.showToast({
        icon: "none",
        title: res.errmsg
      });

      // data.userInfo=res.data
      // uni.setStorageSync('userInfo',res.data)
    }
  });
}




const store = useStore();
const level = uni.getStorageSync('level')
const decorationData = store.state.decorationData
const {
  appContext
} = getCurrentInstance();
let data = reactive({
  subscript: {},
  subscriptShow: false,
  current: 0,
  page: 0,
  size: 20,
  pages: 1,
  goodlistData: [],
  signAll: 0,
})
let userInfo = ref({})
let userLevel = ref([])
let isShow = ref(false)
let isBox = ref(false)
const subscriptOrder = ref('')
let account = ref("")

let orderlistsss = reactive([])
let orderId = ref(1)
let activeIndex = ref(0)
const  newLive=[
      {name:'普通',value:0,},
      {name:'1星', value:1,},
      {name:'2星', value:2,},
      {name:'3星', value:3,},
      {name:'4星', value:4,},
      {name:'5星', value:5,},
      {name:'6星', value:6,},
      {name:'7星', value:7,},
    ]
function getLevelName(value){
  return newLive.find(item=>item.value==value).name
}
let orderList = reactive([{
  name: '待付款',
  state: 1,
  img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335098384.png',
  url: '/pages/order/order?state=1',
	subscript:0
}, {
  name: '待发货',
  state: 2,
  img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
  url: '/pages/order/order?state=2',
	subscript:1
}, {
  name: '待收货',
  state: 3,
  img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335087359.png',
  url: '/pages/order/order?state=3',
	subscript:2
}, {
  name: '已完成',
  state: 4,
  img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335081992.png',
  url: '/pages/order/order?state=4',
	subscript:4
},])

let integrationList = reactive([
 {
    name: '消费券',
    state: 4,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335081992.png',
    url: '/pages/personal/wallet/balance?wallet_type=0',
    value: 'money'
  },
  {
    name: '补贴券',
    state: 3,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335087359.png',
    url: '/pages/personal/wallet/balance?wallet_type=1',
    value: 'coupon'
  },
  {
    name: '资产积分',
    state: 2,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
    url: '/pages/personal/wallet/balance?wallet_type=2',
    value: 'asset'
  },
  {
    name: '绿色积分',
    state: 1,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335098384.png',
    url: '/pages/personal/wallet/balance?wallet_type=3',
    value: 'green'
  },

])
onLoad((option) => {
  // pages/personal/index?token=3e6007c3ebf6484fb970840cd9480a53
  // const token = 'e3a15cb29af9926a0381e212277d7a80'
  // if(option.token||token){
  //   const userInfo = uni.getStorageSync('userInfo')
  //   userInfo.token = option.token||token
  //   uni.setStorageSync('userInfo', userInfo)
  //   inits()
  //
  // }

})

let moneyName = ref(null)
onShow(() => {

  data.page = 0
  data.pages = 1
  data.goodlistData = []
  inits()
  userInfo.value = uni.getStorageSync('userInfo')
  // #ifdef MP-WEIXIN
  if (!userInfo.value.token) {
    wxlogin()
  }
  // #endif
  setOder() //设置需要显示哪些订单
  userLevel.value = uni.getStorageSync('level')
  moneyName.value = uni.getStorageSync('money')
  account.value = userInfo.value.account

})

function onCancel() {

  isBox.value = false
}

function onConfirm() {

  let obj = {
    account: account.value
  }
  proxy.$request({
    url: `api/user_info/`,
    method: 'post',
    data: obj,
    success(res) {
      uni.showToast({
        icon: 'none',
        title: res.errmsg
      })
      isBox.value = false
      data.userInfo = res.data
      userInfo = res.data
      uni.setStorageSync('userInfo', res.data)
    }
  })


}

onPullDownRefresh(() => {
  inits()
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 500);
})
onReachBottom(() => {
  init()
})

// 显示输入弹框
function showDialogBoxInput() {
  console.log(DialogBox);
  DialogBox.confirm({
    title: '更改昵称',
    placeholder: '请输入修改的昵称',
    value: "",
    DialogType: 'input',
    animation: 0
  }).then((res) => {
    // 输入框返回值res

    console.log(res.value)
  })
}

function setOder() {
  const list = [
    {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657870055.png',
      name: '地址管理',
      url: '/pages/personal/address/list'
    }, {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657880960.png',
      name: '粉丝管理',
      url: '/pages/personal/teams/team'
    }, {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657890839.png',
      name: '商家入驻',
      url: '/pages/business/MerchantManagement'
    },

    {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657912163.png',
      name: '实名认证',
      url: '/pages/personal/realName/realName'
    }, {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657924589.png',
      name: '支付密码',
      url: '/pages/personal/password/password?code=1'
    },
    {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657940103.png',
      name: '登录密码',
      url: '/pages/personal/password/password?code=0'
    },
    {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657955737.png',
      name: '我的收藏',
      url: '/pages/personal/footprint/index'
    },  {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657955737.png',
      name: '账号管理',
      url: '/pages/personal/set/accountManagement'
    },


  ]
    list.push( {
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657905598.png',
      name: '客服中心',
      url: '/pages/customerService/customerService'
    })
  // 取消代理设置
  if (userInfo.value.agent > 0&&false) {
    list.push({
      img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657880960.png',
      name: '代理设置',
      url: '/pages/personal/set/agentSet'
    })
  }

  orderlistsss=list
}

function getSign() {
  data.signAll = 0
  appContext.config.globalProperties.$request({
    url: `api/record/?page=${1}&size=${10000}&wallet_type=${1}&detailed=20`,
    method: 'GET',
    success(res) {
      if (res.data.data.length > 0) {
        res.data.data.forEach((it) => {
          data.signAll += it.money
        })
      }

    }
  })
}

function wxlogin() {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      uni.showLoading({
        title: '登录中'
      });
      var config = {
        code: loginRes.code,
      }
      proxy.$request({
        url: 'api/wxLogin/',
        method: 'post',
        data: config,
        success: res => {
          uni.hideLoading()
          if (res.errno == 0) {
            userInfo.value = res.data
            uni.setStorageSync('userInfo', res.data)
          } else if (res.errno == 3) {
            data.open_id = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.errmsg
            })
          }
        }
      })
    },
  });
}

//tabs通知swiper切换
function tabsChange(index) {
  data.current = index;
}

//切换订单
function clickOrder(id) {
  orderId.value = id
}

// 扫码
function scan() {
  // #ifdef APP-PLUS
  uni.scanCode({
    success: function (res) {
      let dats = ''
      dats = res.result.split('=')
      appContext.config.globalProperties.$goURl('/pages/business/pay?id=' + dats[0] + '&discount=' +
          dats[1] +
          '&notes=' + dats[2] + '&money=' + dats[3])
    },
    fail(err) {
      uni.showToast({
        icon: 'none',
        title: '扫码失败'
      })
    }
  });
  // #endif

  // #ifdef H5
  imgUp()
  // #endif

}

function getBusinessToken(url) { //获取商家token
  appContext.config.globalProperties.$request({
    url: `api/getBusinessToken/`,
    method: 'get',
    success(res) {
      if (res.errno == 0) {
        uni.setStorageSync('businessToken', res.data.businessToken)
        setTimeout(() => {
          uni.navigateTo({
            url: url
          })
        }, 500)
      } else {
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })

      }

    }
  })
}

function logout() {
  uni.showModal({
    title: '提示',
    content: '是否确认退出?',
    success: function (res) {
      if (res.confirm) {
        proxy.$request({
          url: `api/logout/`,
          method: 'POST',
          success(res) {
            if (res.errno == 0) {
              uni.setStorageSync('userInfo', {})
              uni.redirectTo({
                url: '/pages/login/login'
              })
            }
          }
        })
      } else {
        console.log('用户点击确定');
      }
    }
  })

}

function imgUp() {
  uni.chooseImage({
    sizeType: ['original'],
    count: 1,
    success: function (res) {
      const tempFilePaths = res.tempFilePaths
      qrcode.qrcode.decode(tempFilePaths[0]);
      qrcode.qrcode.callback = function (img) {
        if (img == "error decoding QR Code") {
          uni.showToast({
            title: "识别二维码失败，请重新上传！",
            duration: 2000,
            icon: 'none'
          })
        } else {
          let dats = img.split('=')
          appContext.config.globalProperties.$goURl('/pages/business/pay?id=' + dats[0] +
              '&discount=' + dats[
                  1] + '&notes=' + dats[2] + '&money=' + dats[3])
        }
      }
    }
  });
}

function q () {
	proxy.$request({
		url: `api/subscript/`,
		method: 'get',
		success(res) {
			subscriptOrder.value = res.data.order
		}
	})

}

function init() {
	q()
  if (data.page < data.pages) {
    data.page++
    appContext.config.globalProperties.$request({
      url: `api/goods_list_all/0/?page=${data.page}&size=${data.size}&is_index=1`,
      method: 'get',
      success(resd) {
        if (resd.errno == 0) {
          data.pages = Math.ceil(resd.data.total / data.size)
          data.goodlistData = resd.data.data
          // isShow.value = true
        }
      }
    })
  }
}

function inits() {
  appContext.config.globalProperties.$request({
    url: `api/user_info/`,
    method: 'get',
    success(resd) {
      if (resd.errno == 0) {
        userInfo.value = resd.data
        uni.setStorageSync('userInfo', resd.data)
        init()
        // getSign() //获取签到积分
      }
    }

  })

}

function scrollEvent(e) {
  console.log('scrollEvent', e)

}

function copy(data) {
  uni.setClipboardData({
    data: data,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    }
  });
}

function applyBusinesss() { //获取审核结果
  appContext.config.globalProperties.$request({
    url: `api/applyBusiness/`,
    method: 'put',
    success(res) {
      if (res.errno == 0) {
        if (res.data.state == 1 || res.data.state == 3) {
          orderlists.value = [{
            img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
            name: '商家管理',
            url: '/pages/business/MerchantManagement'
          }]
        } else {
          orderlists.value = [{
            img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
            name: '商家申请',
            url: '/pages/business/applyfor'
          }]

        }
      } else {
        orderlists.value = [{
          img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
          name: '商家申请',
          url: '/pages/business/applyfor'
        },]
      }

    }
  })
}

//选择哪种订单
function handClicktab(obj, e) {
  activeIndex.value = e
  orderList.forEach((it, i) => {
    if (e !== 0 && i !== 3) {
      it.url = obj.url.slice(0, -1) + it.state;
    } else {
      it.url = obj.url.slice(0, -1) + it.state;
    }
  })
}

function toUrl(item) {
  proxy.$goURl(item.url)

}
</script>
<style lang="scss" scoped>
.jingci {
  margin: 20upx;
  width: 630upx;
  height: 150upx;
  background: url('https://pili-vod.guanxikeji.com/fubao/img/1755857039361.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 80upx;

  .jingciitem {
    height: 150upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .jingciname {
      font-size: 36upx;
      color: #333333;
    }

    .jingcibtn {
      font-size: 12px;
      font-weight: bold;
      color: #FFFFFF;
      background-color: #01b893;
      width: 120upx;
      height: 50upx;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10upx;
    }
  }

}


::v-deep .uni-navbar__header-btns-left {
  width: 200rpx !important;
}

::v-deep .uni-navbar__header-btns-right {
  width: 260rpx !important;
}

.container {
  background-image: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1743991504779.png');
  background-repeat: no-repeat;
  background-size: 100% 200px;
  background-attachment: fixed;

  .set {
    width: 44rpx;
    height: 44rpx;
    margin-right: 40rpx;
    margin-top: 20rpx;

  }

  /* #ifdef MP-WEIXIN */
  .set {
    width: 44rpx;
    height: 44rpx;
    margin-right: 180rpx;
    margin-top: 20rpx;

  }

  /* #endif */
  .share {
    width: 44rpx;
    height: 44rpx;
    margin-left: 40rpx;
    margin-top: 20rpx;
  }

  .messgin {
    width: 44rpx;
    height: 44rpx;
    margin-top: 20rpx;
    margin-left: 20rpx;
  }

  .content {
    .header {
      height: 528rpx;
      background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755333666197.png');
      padding: 60rpx 30upx 30rpx 30rpx;
      color: #fff;

      .info {
        display: flex;
        align-items: flex-start;
        align-items: center;

        .left {
          margin-right: 32rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border: 1px solid;
          border-radius: 50%;
          animation: borderBlink 1s infinite alternate;
          width: 140upx;
          height: 140upx;

          image {
            width: 140upx;
            height: 140upx;
            border-radius: 50%;

            // border: 1upx solid #000;
          }
        }

        // @keyframes borderBlink {
        // 	from {
        // 		border-color: $green;
        // 	}

        // 	to {
        // 		border-color: #00ea61;
        // 		box-shadow: 0px 0px 10px #fff;
        // 	}
        // }

        .right {
          .top {
            .name {
              color: #fff;
              font-weight: bold;
              font-size: 36rpx;
              // font-weight: bold;

              white-space: nowrap;
              /* 禁止换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */
            }

            .vip {
              color: #fcbc31;
              font-weight: bold;

              text {
                color: #fff;
              }
            }
          }

          .dec {
            display: flex;
            margin-top: 10upx;
            width: 280upx;

            .invite {
              color: #06ba8d;
              font-size: 22upx;
              padding: 5upx 20upx;
              background-color: #FFF;
              border-radius: 20upx;
              white-space: nowrap;
              /* 禁止换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */
            }
          }
        }

        .level {
          margin-top: 5upx;
          display: flex;
          flex-direction: row;

          flex-direction: column;

          .team {
            background-color: #ffe3e2;
            border-radius: 10px;
            padding: 0 10upx;
            border: 1px solid #ff7054;

            .text {
              margin-left: 5upx;
              font-size: 12px;
              color: #ff5511;
              text-align: center;
            }
          }

          .my {
            // background-color: #c0eee1;
            width: 100upx;
            height: 50upx;
            border-radius: 10px;
            padding: 0 10upx;
            display: flex;
            flex-direction: row;
            margin-top: 10upx;
            padding-left: 80upx;
            align-items: center;
            // border: 1px solid #06ba8d;
            background: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1744115257955.png');
            background-size: 100% 100%;

            .image {
              width: 25upx;
              height: 25upx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .text {
              margin-left: 5upx;
              font-size: 12px;
              color: #fff;
            }
          }


        }


      }

      .list {
        display: flex;
        margin-top: 30upx;

        .item {
          width: 33%;
          text-align: center;

          .num {
            color: #fff;
            font-size: 40upx;
            font-weight: bold;
          }

          .title {
            color: #fff;
            font-size: 22upx;
          }
        }
      }

      .listbox {
        display: flex;
        justify-content: space-between;
        margin-top: 30upx;

        .itembox {
          width: 45%;
          color: #707070;
          border: 1upx solid #707070;
          border-radius: 20upx;
          height: 140upx;
          text-align: center;
          line-height: 140upx;
        }
      }
    }

    .moneyListe {
      max-height: 340rpx;
      display: flex;
      justify-content: center;
      margin: 20upx;

      .box-new {
        background: #FFFFFF;
        width: 100%;
        border-radius: 13px;
        padding: 20rpx 30rpx;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;

        .integral {
          width: 33%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .t1 {
            font-weight: bold;
            font-size: 14px;
            color: #111;
          }

          .t2 {
            font-weight: 400;
            font-size: 12px;
            color: #666;
          }
        }
      }

      .box {
        width: 100%;
        background: #FFFFFF;
        // border-radius: 26rpx 26rpx 26rpx 26rpx;
        border-radius: 13px 13px 13px 13px;
        background-image: url('https://pili-vod.guanxikeji.com/moban/img/1720494859241.png');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 296rpx 272rpx;

        .list_a {
          display: flex;
          padding: 34rpx 40rpx 0rpx 40rpx;
          justify-content: space-between;

          .jifen {
            display: flex;

            image {
              width: 40rpx;
              height: 40rpx;
            }

            .txt {
              font-weight: 500;
              font-size: 30rpx;
              color: #909090;
              margin-left: 12rpx;
            }
          }
        }

        .list_b {
          display: flex;
          justify-content: space-between;
          margin-top: 10rpx;
          margin-bottom: 20rpx;
          font-weight: bold;
          font-size: 60rpx;
          color: #000;
          padding: 0upx 0upx 0upx 20upx;

          .right {
            width: 180rpx;
            height: 70rpx;
            background: #00C356;
            border-radius: 36rpx 0rpx 0rpx 36rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            margin-top: -30rpx;

            image {
              width: 40rpx;
              height: 40rpx;
              margin-right: 8rpx;
            }
          }


        }

        .list_c {
          background-color: rgba(239, 239, 239, 0.35);
          display: flex;
          justify-content: space-around;
          height: 130rpx;
          padding-top: 34rpx;

          .linecenter {
            height: 70%;
            width: 1px;
            background-color: #ccc;
          }

          // padding: 24rpx;

        }
      }
    }

    .order {
      margin: 28rpx 30rpx;
      background-color: #FFF;
      padding: 32rpx 28rpx;

      .titletow {
        font-weight: bold;
        color: #333;

        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        width: auto;
        padding-left: 6rpx;
      }

      .title {
        font-weight: bold;
        color: #000;

        display: flex;
        justify-content: space-between;
        font-size: 15px;
        display: flex;
        justify-content: flex-start;

        .active {
          color: #000;;
        }

        .oooo {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .monkey::after {
          content: '';
          width: 30px;
          height: 3px;
          background-color: red;
          display: block;
          margin-top: 10px;
          border-radius: 10px;
          transition: width 5s;
        }

        .titles {
          font-size: 12px;
          color: #999;
          font-weight: 300upx;
        }
      }

      .listbox {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .list {
        display: flex;
        margin: 20upx;
        align-items: center;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 20upx;

          image {
            width: 50upx;
            height: 50upx;
            margin-bottom: 30upx;
          }

          .imgs {
            width: 80upx;
            height: 80upx;
          }

          .text {
            color: #666666;
            font-size: 24upx;
            background: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1744115257955.png');
            background-size: 100% 100%;

          }

          .texts {
            color: #333;
            font-size: 28upx;
            font-weight: bold;
          }
        }
      }

      .lists {
        display: flex;
        padding: 20upx;
        // border-top: 1upx solid #F5F5F5;
        justify-content: space-between;

        .items {
          display: flex;
          align-items: center;
          background-color: #F6F6F6;
          border-radius: 40upx;
          padding: 10upx 20upx;

          image {
            width: 40upx;
            height: 40upx;
            margin-right: 10upx;
          }

          .texts {
            color: #666666;
            font-size: 24upx;
          }
        }
      }

      .listss {
        // padding: 20upx;
        // border-top: 1upx solid #F5F5F5;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;

        &.l_j_s {
          justify-content: start;
        }

        .item {
          width: 20%;
          justify-content: center;
          padding: 40rpx 0 0 0;

          .left {
            font-size: 24upx;
            color: #111;
            // font-weight: bold;
            display: flex;
            align-items: center;
            flex-direction: column;


            image {
              width: 44upx;
              height: 44upx;
            }
          }
        }

        .items {
          width: 25%;
          justify-content: center;
          padding: 20upx 0;

          .left {
            font-size: 24upx;
            color: #111;
            // font-weight: bold;
            display: flex;
            align-items: center;
            flex-direction: column;


            image {
              width: 44upx;
              height: 44upx;
            }
          }
        }
      }
    }

    .GoodsListTitle {
      font-weight: bold;
      color: #333;
      margin: 20upx;
      padding-left: 20rpx;
      font-size: 16px;
      display: flex;
      justify-content: flex-start;
    }
  }
}

::v-deep .z-tabs-bottom {
  bottom: 0px !important;
}


$base: #fe3b0f; // 基础颜色

.page-total {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 文件重命名 */
.dialog-box {
  width: 80%;
  height: 300rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100rpx;
    font-size: 32rpx;
    color: #222222;
    font-weight: bold;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 80rpx;
    margin: 0 auto;
    background-color: #f6f6f6;
    border-radius: 10rpx;

    input {
      width: 80%;
      height: 100%;
      font-size: 28rpx;
      color: #222222;
      padding: 0 4%;
    }

    text {
      font-size: 34rpx;
      color: #c0c0c0;
      margin-right: 4%;
    }
  }

  .inquiry {
    padding: 0 4%;
    height: 80rpx;
    text-align: center;

    text {
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
    }
  }

  .operation-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    margin-top: 20rpx;
    border-top: 2rpx solid #f6f6f6;

    .btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;

      text {
        font-size: 28rpx;
        color: #222222;
      }

      .tag {
        position: absolute;
        right: 0;
        top: 30%;
        width: 2rpx;
        height: 40%;
        background-color: #f6f6f6;
      }

      .activity {
        color: $base;
      }
    }
  }
}


.a-fadein,
.a-fadeinT,
.a-fadeinR,
.a-fadeinB,
.a-fadeinL,
.a-bouncein,
.a-bounceinT,
.a-bounceinR,
.a-bounceinB,
.a-bounceinL,
.a-rotatein,
.a-rotateinLT,
.a-rotateinLB,
.a-rotateinRT,
.a-rotateinRB,
.a-flipin,
.a-flipinX,
.a-flipinY {
  -webkit-animation: .3s ease-out backwards;
  -moz-animation: .3s ease-out backwards;
  -ms-animation: .3s ease-out backwards;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.a-fadeout,
.a-fadeoutT,
.a-fadeoutR,
.a-fadeoutB,
.a-fadeoutL,
.a-bounceout,
.a-bounceoutT,
.a-bounceoutR,
.a-bounceoutB,
.a-bounceoutL,
.a-rotateout,
.a-rotateoutLT,
.a-rotateoutLB,
.a-rotateoutRT,
.a-rotateoutRB,
.a-flipoutX,
.a-flipoutY {
  -webkit-animation: .3s ease-in forwards;
  -moz-animation: .3s ease-in forwards;
  -ms-animation: .3s ease-in forwards;
  animation: .3s ease-in forwards;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/* 淡入 */
.a-fadein {
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -ms-animation-name: fadein;
  animation-name: fadein;
}

/* 淡出 */
.a-fadeout {
  -webkit-animation-name: fadeout;
  -moz-animation-name: fadeout;
  -ms-animation-name: fadeout;
  animation-name: fadeout;
}

/* 弹入 */
.a-bouncein {
  -webkit-animation-name: bouncein;
  -moz-animation-name: bouncein;
  -ms-animation-name: bouncein;
  animation-name: bouncein;
}

/* 弹出 */
.a-bounceout {
  -webkit-animation-name: bounceout;
  -moz-animation-name: bounceout;
  -ms-animation-name: bounceout;
  animation-name: bounceout;
}


/* 淡入 */
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 淡出 */
@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* 弹入 */
@keyframes bouncein {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 弹出 */
@keyframes bounceout {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

.page-content {
  padding-top: 30rpx;
  background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755334206113.png');
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 340rpx;
  background-size: 100% 100%;


}

.page-content-top {
  height: 134rpx;
  background-image: url('https://pili-vod.guanxikeji.com/fubao/img/1755678005559.png');
  border-radius: 16rpx 16rpx 0px 0px;
  background-size: 100% 100%;
  position: absolute;
  top: 250rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx 0 105rpx;

  .top-text {
    font-weight: 400;
    font-size: 24rpx;
    color: #FFFFFF;
  }

  .top-text-s {
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    white-space: nowrap;
  }

  .right-text {
    font-weight: 400;
    font-size: 24rpx;
    white-space: nowrap;
    color: #786B54;
  }
}
.binding_input{
  margin:20rpx 0
}
</style>
